<script setup>
import { useArticleApi } from '/@/api/article';

const { getArticleCateList } = useArticleApi();

const props = defineProps({
	modelValue: {
		type: Number,
	},
});
const emit = defineEmits(['update:modelValue']);
const selected = computed({
	get: () => props.modelValue,
	set(val) {
		emit('update:modelValue', val);
	},
});
const cascaderProps = {
	checkStrictly: true,
	emitPath: false,
	value: 'id',
	label: 'name',
};
const options = ref([]);
async function init() {
	let params = {
		current: 1,
		pageSize: 99,
		showStatus: 1,
	};
	let res = await getArticleCateList(params);
	if (res.code !== 200) return;
	const cateList = res.data.data;
	const pCateList = cateList.filter((item) => item.parId === 0 || item.parId === null);
	options.value = pCateList.map((item1) => {
		return {
			...item1,
			children: cateList.filter((item2) => {
				return item1.id === item2.parId;
			}),
		};
	});
}
onMounted(init);
</script>
<template>
	<!-- <el-select class="ArticleSelector" v-model="selected" clearable :loading="loading">
        <template v-for="item in options" :key="item.id">
            <el-option v-if="item.showStatus === 1" :label="item.name" :value="item.id"> </el-option>
        </template>
    </el-select> -->

	<el-cascader v-model="selected" class="ArticleCateSelector" :options="options" :props="cascaderProps" clearable />
</template>

<style lang="scss" scoped>
.ArticleCateSelector {
}
</style>
